<template>
  <div class="editMessage">
    <!-- 修改信息页面 -->
    <el-card body-style="margin-top:20px;" class="roleMessage" shadow="never">
      <div slot="header">
        <span>修改信息</span>
      </div>
      <!-- 角色信息表单-->
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item label="登录账号:">
          <div class="loginNum">
            <div>{{ ruleForm.mobile }}</div>
            <div class="editAccount" @click="editAccount">修改账号</div>
            <div class="line" />
            <div class="editPassword" @click="editPassword">修改密码</div>
          </div>
        </el-form-item>
        <el-form-item label="联系人姓名:" prop="contactName">
          <el-input v-model="ruleForm.contactName" placeholder="请输入联系人" style="width:400px" size="small" />
        </el-form-item>
        <el-form-item label="账号角色:">
          <div>
            <!-- 账号角色 -->
            {{ ruleForm.roleName }}
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submit">提交</el-button>
          <el-button type="default" size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="forgetPassword" @click="forgetPassword">忘记密码?</div>
      <!-- 忘记密码表单内容 -->
      <el-dialog class="forgetPasswordList" width="600px" title="忘记密码" :visible.sync="dialogFormVisible">
        <el-form ref="forgetpswForm" :model="forgetpswForm" :rules="forgetpswRules" label-width="100px" class="demo-ruleForm">
          <el-form-item class="elForm" label="密码" prop="password">
            <!-- 密码输入框 -->
            <el-input v-model="forgetpswForm.password" size="mini" class="forgetPwdIpt" placeholder="请输入新的密码" type="password" show-password autocomplete="off" />
          </el-form-item>
          <el-form-item class="elForm" label="确认密码" prop="checkPass">
            <!-- 确认密码输入 -->
            <el-input v-model="forgetpswForm.checkPass" size="mini" class="forgetPwdIpt" placeholder="请再次输入密码" type="password" show-password autocomplete="off" />
          </el-form-item>
          <el-form-item class="elForm" label="手机号码" prop="mobile">
            <!-- 手机号码输入 -->
            <el-input v-model="forgetpswForm.mobile" size="mini" class="forgetPwdIpt" placeholder="请输入手机号码" autocomplete="off" />
          </el-form-item>
          <el-form-item class="elForm getCode" label="验证码">
            <!-- 验证码输入,点击按钮获取验证码 -->
            <el-input v-model="forgetpswForm.code" style="width:250px" size="mini" class="forgetPwdIpt" placeholder="请输入手机验证码" autocomplete="off" />
            <!-- <el-button style="margin-left:30px" type="primary" size="default" @click="">获取验证码</el-button> -->
            <el-button type="primary" style="margin-left:30px" :disabled="disable" :class="{ codeGeting:isGeting }" @click="getVerifyCode">{{ getCode }}</el-button>
          </el-form-item>
          <el-form-item class="elForm">
            <!-- 点击提交表单内容,重置密码 -->
            <el-button style="width:85%;margin-top:20px" type="primary" @click="resetPassword">重置密码</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import { updatePasswordByMobileApi } from '@/api/myMessage/editMessage'
import { isvalidName, isvalidPass, isvalidPhone } from '@/utils/validate'
import { getForgetCodeAPI } from '@/api/login'
// 引入用户信息接口
import { getMemberInfoApi, forgetPasswordApi } from '@/api/login'

export default {
// import引入的组件需要注入到对象中才能使用，
  components: {},
  data() {
    // 这里存放数据
    // 手机号验证
    var validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }

    // 密码验证
    var validatePass = function(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入密码 '))
      } else if (!isvalidPass(value)) {
        callback(
          new Error('8到20位数字、字母或符号组成,不可为纯数字')
        )
      } else {
        callback()
      }
    }

    // 忘记密码 确认密码验证
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.forgetpswForm.password) {
        callback(new Error('两次输入的密码不一致!'))
      } else {
        callback()
      }
    }

    // 联系人校验
    var validName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入检测人'))
      } else if (!isvalidName(value)) {
        callback(
          new Error('由2-20个中文或英文组成')
        )
      } else {
        callback()
      }
    }

    return {
      // 验证码部分
      getCode: '获取验证码', // 验证码按钮默认文字
      isGeting: false, //
      count: 60, // 倒计时60s
      disable: false, // 控制倒计时按钮 是否可用
      dialogFormVisible: false, // 忘记密码弹框
      forgetpswForm: { // 忘记密码提交表单内容
        password: '', // 密码
        checkPass: '', // 确认密码
        mobile: '', // 电话号码
        code: '' // 验证码
      },
      forgetpswRules: {
        password: [{ required: true, trigger: 'blur', validator: validatePass }],
        checkPass: [{ required: true, trigger: 'blur', validator: validatePass2 }],
        mobile: [{ required: true, trigger: 'blur', validator: validPhone }]
      },
      // 表单验证
      rules: {
        contactName: [
          { trigger: 'blur', validator: validName }
        ]
      },
      ruleForm: { // 用户信息表单

      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化，
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.memberInfo()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // 重置密码按钮
    resetPassword() {
      this.$refs.forgetpswForm.validate(valid => {
        if (valid) {
          forgetPasswordApi(this.forgetpswForm).then(res => {
            if (res.code === 200) {
              console.log(res)
              this.$message({
                message: '重置成功！',
                type: 'success'
              })
              this.dialogFormVisible = false // 关闭表单
            } else {
              this.$message({
                message: '重置失败',
                type: 'error'
              })
            }
          }
          )
        } else {
          return false
        }
      })
    },
    // 获取用户信息
    memberInfo() {
      getMemberInfoApi().then(res => {
        if (res.code === 200) {
          this.ruleForm = res.data
        } else {
          this.$message.error('获取用户信息失败！')
        }
      })
    },
    // 忘记密码点击按钮倒计时
    getVerifyCode() {
      this.$refs.forgetpswForm.validate(valid => {
        if (valid) {
          getForgetCodeAPI(this.forgetpswForm.mobile).then(res => {
            if (res.code === 200) {
              console.log(res)
              this.$message({
                message: '验证码已发送！',
                type: 'success' })
            } else {
              this.$message.error({
                message: `发送失败！` + res.msg
              })
            }
            // 点击按钮倒计时
            var countDown = setInterval(() => {
              if (this.count < 1) {
                this.isGeting = false
                this.disable = false
                this.getCode = '获取验证码'
                this.count = 60
                clearInterval(countDown)
              } else {
                this.isGeting = true
                this.disable = true
                this.getCode = this.count-- + 's后重发'
              }
            }, 1000)
          })
        } else {
          return false
        }
      })
    },
    editAccount() { // 修改账号
      this.$router.push({
        name: 'EditAccount'
      })
    },
    editPassword() { // 修改密码
      this.$router.push({
        name: 'EditPassword'
      })
    },
    forgetPassword() {
      this.dialogFormVisible = true // 显示忘记密码弹框
      // console.log(this.dialogFormVisible)
    },
    submit(formName) { // 提交表单事件
      // 提交验证表单
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          updatePasswordByMobileApi(this.ruleForm.contactName).then(res => {
            if (res.code === 200) {
              console.log(res)
              this.$message({
                type: 'success',
                message: '修改成功，请退出后重新登录！'
              })
            }
          })
        } else {
          this.$message.error('修改失败！')
          return false
        }
      })
    },
    reset() {
      // 重置表单事件
      console.log('重置')
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
.editMessage{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f0f2f5;
  .roleMessage{
    margin: 30px;
    .loginNum{
      width: 400px;
      display: flex;
      justify-content: space-between;
      .editAccount{
          color: #169BD5;
          user-select: none;
          cursor: pointer;
      }
      .editAccount:hover{
          color: red;
      }
      .editPassword{
         color: #169BD5;
         user-select: none;
         cursor: pointer;
      }
      .editPassword:hover{
        color: red;
      }
      .line{
        width: 1px;
        height: 30px;
        margin: auto 0;
        background-color: #333;
      }
    }
    .forgetPassword{
      width: 100px;
      color: #169BD5;
    }
    .forgetPassword:hover{
      color: red;
      user-select: none;
      cursor: pointer;
    }
   .forgetPasswordList .el-form-item.elForm{
    color: #000;
    background: rgba(255, 255, 255, 1);
   }
  }
}
</style>
